<template>
  <div class="login-page" :style="{ backgroundImage: `url(${bgUrl})` }">
    <header class="top-actions">
      <button class="link" @click="noop">随便看看</button>
    </header>

    <main class="content">
      <div class="brand-logo">
        <div class="curve-container">
          <!-- 逐个定义字母，便于单独控制位置和角度 -->
          <span class="letter" :style="letterStyles.l">L</span>
          <span class="letter" :style="letterStyles.e">e</span>
          <span class="letter" :style="letterStyles.x">x</span>
          <span class="letter" :style="letterStyles.i">i</span>
          <span class="letter" :style="letterStyles.g">g</span>
          <span class="letter" :style="letterStyles.o">o</span>
        </div>
        <div class="x-container">
          <div class="x-letter">X</div>
        </div>
      </div>
      <div class="brand-subtitle">一站式背单词工具</div>

      <!-- 手机号登录按钮 -->
      <button 
        v-if="!showPhoneLogin" 
        class="primary-btn" 
        @click="showPhoneLogin = true"
      >
        <span class="icon">📞</span>
        手机号登录
      </button>

      <!-- 手机号验证码登录 -->
      <div v-if="showPhoneLogin" class="phone-login-container">
        <div class="input-group-phone">
          <input 
            type="tel" 
            v-model="phoneForm.phone" 
            placeholder="请输入手机号"
            class="phone-input"
            maxlength="11"
            @keyup.enter="handlePhoneLogin"
          />
        </div>
        <div class="input-group-code">
          <input 
            type="text" 
            v-model="phoneForm.code" 
            placeholder="请输入验证码"
            class="code-input"
            maxlength="6"
            @keyup.enter="handlePhoneLogin"
          />
          <button 
            class="code-btn" 
            @click="sendCode" 
            :disabled="codeCountdown > 0 || !isValidPhone"
          >
            {{ codeCountdown > 0 ? `${codeCountdown}秒后重发` : '获取验证码' }}
          </button>
        </div>
        <button class="phone-login-btn" @click="handlePhoneLogin" :disabled="isLoading">
          {{ isLoading ? '登录中...' : '登录' }}
        </button>
      </div>

      <button class="alt-trigger" @click="showPasswordLogin">
        账号密码登录
      </button>

      <div class="agreements">
        <label class="agreement-checkbox">
          <input 
            type="checkbox" 
            v-model="agreedToTerms"
            class="checkbox-input"
          />
          <span class="checkbox-custom" :class="{ checked: agreedToTerms }">✔</span>
        </label>
        <span class="agreement-text">
          我已阅读并同意
          <a href="javascript:void(0)" @click="showTermsModal = true" class="terms-link">《服务条款》</a>
          和
          <a href="javascript:void(0)" @click="showPrivacyModal = true" class="privacy-link">《隐私协议》</a>
        </span>
      </div>
    </main>

    <!-- Password Login Modal -->
    <div class="password-modal" v-show="showPasswordModal">
      <div class="modal-overlay" @click="closePasswordModal"></div>
      <div class="modal-content">
        <div class="modal-header">
          <h2>密码登录</h2>
          <button class="close-btn" @click="closePasswordModal">×</button>
        </div>
        <div class="modal-body">
          <div class="input-group">
            <label>用户名</label>
            <input 
              type="text" 
              v-model="loginForm.username" 
              placeholder="请输入用户名"
              class="input-field"
            />
          </div>
          <div class="input-group">
            <label>密码</label>
            <input 
              type="password" 
              v-model="loginForm.password" 
              placeholder="请输入密码"
              class="input-field"
              @keyup.enter="handleLogin"
            />
          </div>
          <button class="login-submit-btn" @click="handleLogin" :disabled="isLoading">
            {{ isLoading ? '登录中...' : '登录' }}
          </button>
        </div>
      </div>
    </div>

    <!-- Agreement Confirmation Modal -->
    <div class="agreement-modal" v-show="showAgreementModal">
      <div class="modal-overlay" @click="closeAgreementModal"></div>
      <div class="agreement-modal-content">
        <div class="agreement-modal-header">
          <h3>用户协议</h3>
        </div>
        <div class="agreement-modal-body">
          <p>使用本服务前，请先阅读并同意《服务条款》和《隐私协议》</p>
        </div>
        <div class="agreement-modal-footer">
          <button class="agreement-btn cancel" @click="closeAgreementModal">取消</button>
          <button class="agreement-btn confirm" @click="confirmAgreement">同意</button>
        </div>
      </div>
    </div>

    <!-- Terms of Service Modal -->
    <div class="agreement-modal" v-show="showTermsModal">
      <div class="modal-overlay" @click="showTermsModal = false"></div>
      <div class="agreement-modal-content terms-content">
        <div class="agreement-modal-header">
          <h3>服务条款</h3>
          <button class="close-btn" @click="showTermsModal = false">×</button>
        </div>
        <div class="agreement-modal-body terms-body">
          <div class="terms-text">
            <h4>1. 服务说明</h4>
            <p>欢迎使用一站式背单词工具。本服务为您提供便捷的单词学习体验。</p>
            
            <h4>2. 用户义务</h4>
            <p>使用本服务时，您应确保提供的信息真实、准确、完整。不得利用本服务从事违法违规活动。</p>
            
            <h4>3. 服务变更</h4>
            <p>我们保留随时修改、暂停或终止服务的权利，并会提前通知用户。</p>
            
            <h4>4. 免责声明</h4>
            <p>本服务按"现状"提供，不保证服务的连续性、准确性或安全性。因使用本服务造成的损失，我们不负责任。</p>
            
            <h4>5. 争议解决</h4>
            <p>如发生争议，双方应友好协商解决；协商不成的，可通过法律途径解决。</p>
          </div>
        </div>
        <div class="agreement-modal-footer">
          <button class="agreement-btn confirm" @click="showTermsModal = false" style="width: 100%;">我知道了</button>
        </div>
      </div>
    </div>

    <!-- Privacy Policy Modal -->
    <div class="agreement-modal" v-show="showPrivacyModal">
      <div class="modal-overlay" @click="showPrivacyModal = false"></div>
      <div class="agreement-modal-content privacy-content">
        <div class="agreement-modal-header">
          <h3>隐私协议</h3>
          <button class="close-btn" @click="showPrivacyModal = false">×</button>
        </div>
        <div class="agreement-modal-body privacy-body">
          <div class="terms-text">
            <h4>1. 信息收集</h4>
            <p>我们仅收集提供服务所必需的信息，包括但不限于手机号、用户名等。</p>
            
            <h4>2. 信息使用</h4>
            <p>您的信息仅用于账户验证、服务提供和改进用户体验，不会用于其他商业目的。</p>
            
            <h4>3. 信息保护</h4>
            <p>我们采用行业标准的安全措施保护您的个人信息，防止未经授权的访问、使用或泄露。</p>
            
            <h4>4. 信息分享</h4>
            <p>未经您的同意，我们不会向第三方分享您的个人信息，法律法规要求的除外。</p>
            
            <h4>5. 用户权利</h4>
            <p>您有权查看、更正或删除您的个人信息，可通过联系客服完成相关操作。</p>
            
            <h4>6. 隐私政策更新</h4>
            <p>我们可能会不定期更新隐私政策，更新后的政策将在本页面公布，请您及时查看。</p>
          </div>
        </div>
        <div class="agreement-modal-footer">
          <button class="agreement-btn confirm" @click="showPrivacyModal = false" style="width: 100%;">我知道了</button>
        </div>
      </div>
    </div>

    <!-- Toast Notification -->
    <div class="toast" v-if="toastMessage" :class="toastType">
      {{ toastMessage }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { reactive } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { setToken, isAuthenticated } from '../utils/auth.js';

const router = useRouter();
const route = useRoute();

// 定义每个字母的位置和角度，模拟曲线形态
const letterStyles = reactive({
  l: {
    transform: 'translate(0, 0) rotate(-10deg)',
  },
  e: {
    transform: 'translate(30px, -20px) rotate(-20deg)',
  },
  x: {
    transform: 'translate(60px, -43px) rotate(-30deg)',
  },
  i: {
    transform: 'translate(95px, -15px) rotate(5deg)',
  },
  g: {
    transform: 'translate(120px, 0) rotate(0deg)',
  },
  o: {
    transform: 'translate(150px, -20px) rotate(-5deg)',
  },
});

const showPasswordModal = ref(false);
const showPhoneLogin = ref(false);
const isLoading = ref(false);
const bgUrl = "/lgbg.jpg";
const toastMessage = ref('');
const toastType = ref('success'); // 'success' or 'error'
const codeCountdown = ref(0);
const agreedToTerms = ref(false);
const showAgreementModal = ref(false);
const showTermsModal = ref(false);
const showPrivacyModal = ref(false);
const pendingLoginAction = ref(null); // 存储待执行的登录函数

const phoneForm = reactive({
  phone: '',
  code: ''
});

const loginForm = reactive({
  username: '',
  password: ''
});

// 验证手机号格式
const isValidPhone = computed(() => {
  return /^1[3-9]\d{9}$/.test(phoneForm.phone);
});

function showToast(message, type = 'success') {
  toastMessage.value = message;
  toastType.value = type;
  setTimeout(() => {
    toastMessage.value = '';
  }, 3000);
}

function showPasswordLogin() {
  showPasswordModal.value = true;
}

// 检查协议并执行登录
function checkAgreementAndLogin(loginAction) {
  if (!agreedToTerms.value) {
    showAgreementModal.value = true;
    pendingLoginAction.value = loginAction;
  } else {
    loginAction();
  }
}

// 关闭协议弹窗
function closeAgreementModal() {
  showAgreementModal.value = false;
  pendingLoginAction.value = null;
}

// 确认协议并执行登录
function confirmAgreement() {
  agreedToTerms.value = true;
  closeAgreementModal();
  if (pendingLoginAction.value) {
    pendingLoginAction.value();
    pendingLoginAction.value = null;
  }
}

// 发送验证码
async function sendCode() {
  if (!isValidPhone.value) {
    showToast('请输入正确的手机号', 'error');
    return;
  }

  // 如果正在倒计时，不允许重复发送
  if (codeCountdown.value > 0) {
    return;
  }

  // 立即开始倒计时，提升用户体验
  codeCountdown.value = 60;
  const timer = setInterval(() => {
    codeCountdown.value--;
    if (codeCountdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);

  try {
    const response = await fetch('http://localhost:8080/api/auth/send-code', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        phone: phoneForm.phone.trim()
      })
    });

    const data = await response.json();
    
    if (response.ok) {
      // 开发版：打印验证码到控制台
      // 后端可能返回的格式：{code: 200, data: {code: "123456"}} 或 {code: "123456"} 或 {data: "123456"}
      let verificationCode = null;
      
      // 尝试多种方式解析验证码
      if (data.data) {
        if (typeof data.data === 'string' && data.data.length <= 6) {
          verificationCode = data.data;
        } else if (data.data.code) {
          verificationCode = data.data.code;
        } else if (data.data.verificationCode) {
          verificationCode = data.data.verificationCode;
        }
      }
      
      if (!verificationCode) {
        if (typeof data.code === 'string' && data.code.length <= 6) {
          verificationCode = data.code;
        } else if (data.message && typeof data.message === 'string' && data.message.length <= 6) {
          verificationCode = data.message;
        } else if (data.verificationCode) {
          verificationCode = data.verificationCode;
        }
      }
      
      console.log('=== 验证码信息 ===');
      console.log('完整响应:', data);
      if (verificationCode) {
        console.log('验证码:', verificationCode);
      } else {
        console.warn('无法解析验证码，请查看完整响应:', data);
        console.log('提示：请检查后端返回的数据结构，验证码可能在 data.code、data.data.code 或 data.data 中');
      }
      
      showToast('验证码已发送', 'success');
    } else {
      // 请求失败，停止倒计时
      clearInterval(timer);
      codeCountdown.value = 0;
      showToast(data.message || '发送验证码失败', 'error');
    }
  } catch (error) {
    // 网络错误，停止倒计时
    clearInterval(timer);
    codeCountdown.value = 0;
    console.error('Send code error:', error);
    showToast('网络错误，请稍后重试', 'error');
  }
}

// 验证码登录
async function handlePhoneLogin() {
  checkAgreementAndLogin(() => {
    doPhoneLogin();
  });
}

async function doPhoneLogin() {
  if (!isValidPhone.value) {
    showToast('请输入正确的手机号', 'error');
    return;
  }

  if (!phoneForm.code.trim()) {
    showToast('请输入验证码', 'error');
    return;
  }

  isLoading.value = true;
  try {
    const response = await fetch('http://localhost:8080/api/auth/phone-login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        phone: phoneForm.phone.trim(),
        code: phoneForm.code.trim()
      })
    });

    const data = await response.json();
    
    if (response.ok) {
      // 登录成功，保存token和过期时间（30分钟）
      const token = data.data?.token || data.token;
      if (!token) {
        console.error('登录响应中未找到token:', data);
        showToast('登录失败：未获取到token', 'error');
        return;
      }
      
      // 保存token
      setToken(token, 30 * 60 * 1000); // 30分钟过期
      console.log('Token已保存');
      
      // 保存用户名（从后端返回的数据中获取，如果没有则使用手机号）
      const usernameToSave = data.data?.username || data.username || phoneForm.phone.trim();
      if (usernameToSave) {
        localStorage.setItem('username', usernameToSave);
        console.log('用户名已保存:', usernameToSave);
      }
      
      // 验证token是否真的保存成功
      const savedToken = localStorage.getItem('token');
      if (!savedToken) {
        console.error('Token保存失败！');
        showToast('登录失败：token保存失败', 'error');
        return;
      }
      
      // 标记登录成功，以便主页显示提示
      sessionStorage.setItem('showLoginSuccess', 'true');
      showToast('登录成功！', 'success');
      
      // 跳转到原本要访问的页面，如果没有则跳转到首页
      const redirectPath = route.query.redirect || '/';
      console.log('准备跳转到:', redirectPath);
      
      // 使用 nextTick 确保状态更新完成后再跳转
      setTimeout(() => {
        // 再次验证登录状态
        if (!isAuthenticated()) {
          console.error('跳转前验证：用户未登录！');
          showToast('登录状态异常，请重新登录', 'error');
          return;
        }
        
        router.replace(redirectPath).then(() => {
          console.log('跳转成功');
        }).catch((err) => {
          console.error('跳转失败:', err);
          // 如果跳转失败，尝试直接跳转首页
          router.replace('/');
        });
      }, 100);
    } else {
      // 登录失败
      showToast(data.message || '登录失败，请检查验证码', 'error');
    }
  } catch (error) {
    console.error('Phone login error:', error);
    showToast('网络错误，请稍后重试', 'error');
  } finally {
    isLoading.value = false;
  }
}

function closePasswordModal() {
  showPasswordModal.value = false;
}

async function handleLogin() {
  checkAgreementAndLogin(() => {
    doLogin();
  });
}

async function doLogin() {
  if (!loginForm.username.trim() || !loginForm.password.trim()) {
    showToast('请输入用户名和密码', 'error');
    return;
  }

  isLoading.value = true;
  try {
    const response = await fetch('http://localhost:8080/api/auth/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username: loginForm.username,
        password: loginForm.password
      })
    });

    const data = await response.json();
    
    if (response.ok) {
      // 登录成功，保存token和过期时间（30分钟）
      const token = data.data?.token || data.token;
      if (!token) {
        console.error('登录响应中未找到token:', data);
        showToast('登录失败：未获取到token', 'error');
        return;
      }
      
      // 保存token
      setToken(token, 30 * 60 * 1000); // 30分钟过期
      console.log('Token已保存');
      
      // 保存用户名（从后端返回的数据中获取，如果没有则使用登录时输入的用户名）
      const usernameToSave = data.data?.username || data.username || loginForm.username.trim();
      if (usernameToSave) {
        localStorage.setItem('username', usernameToSave);
        console.log('用户名已保存:', usernameToSave);
      }
      
      // 验证token是否真的保存成功
      const savedToken = localStorage.getItem('token');
      if (!savedToken) {
        console.error('Token保存失败！');
        showToast('登录失败：token保存失败', 'error');
        return;
      }
      
      // 标记登录成功，以便主页显示提示
      sessionStorage.setItem('showLoginSuccess', 'true');
      closePasswordModal();
      
      // 跳转到原本要访问的页面，如果没有则跳转到首页
      const redirectPath = route.query.redirect || '/';
      console.log('准备跳转到:', redirectPath);
      
      // 延迟一下确保token保存完成
      setTimeout(() => {
        // 再次验证登录状态
        if (!isAuthenticated()) {
          console.error('跳转前验证：用户未登录！');
          showToast('登录状态异常，请重新登录', 'error');
          return;
        }
        
        router.replace(redirectPath).then(() => {
          console.log('跳转成功');
        }).catch((err) => {
          console.error('跳转失败:', err);
          // 如果跳转失败，尝试直接跳转首页
          router.replace('/');
        });
      }, 100);
    } else {
      // 登录失败
      showToast(data.message || '登录失败，请检查用户名和密码', 'error');
    }
  } catch (error) {
    console.error('Login error:', error);
    showToast('网络错误，请稍后重试', 'error');
  } finally {
    isLoading.value = false;
  }
}

function noop() {}
</script>

<style scoped>
.login-page {
  position: fixed;
  inset: 0;
  background: #f5f5f5;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.top-actions {
  display: flex;
  justify-content: flex-end;
  padding: 16px 18px;
}

.link {
  background: transparent;
  border: none;
  color: #4b5563;
  font-size: 14px;
  cursor: pointer;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
  flex: 1;
}

.brand-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: -40px;
  margin-bottom: 5px;
}

.lexigo-container {
  width: 240px;
  height: 50px;
}

.lexigo-svg {
  width: 100%;
  height: 100%;
}

.lexigo-svg text {
  font-size: 20px;
  font-weight: 800;
  fill: #333;
  font-family: Arial, sans-serif;
}

.lexigo-svg .letter {
  letter-spacing: 0px;
}

.x-container {
  width: 80px;
  height: 80px;
  margin-top: 20px;
}

.x-letter {
  font-size: 80px;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1.5px #333;
  text-stroke: 1.5px #333;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
}


.brand-subtitle {
  margin-top: 5px;
  font-size: 18px;
  color: #374151;
}

.primary-btn {
  margin-top: 60px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #00c25f;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  cursor: pointer;
  position: relative;
  width: 300px;
  height: 55px;
  justify-content: center;
  animation: slideUpFadeIn 0.6s ease-out;
  transition: all 0.2s;
}

.primary-btn:hover {
  background: #00a853;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 194, 95, 0.3);
}

.primary-btn .icon {
  font-size: 20px;
}

/* 手机号验证码登录容器 */
.phone-login-container {
  margin-top: 40px;
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: slideUpFadeIn 0.6s ease-out;
}

.input-group-phone {
  width: 100%;
}

.phone-input {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-size: 16px;
  transition: all 0.2s;
  box-sizing: border-box;
}

.phone-input:focus {
  outline: none;
  border-color: #00c25f;
  box-shadow: 0 0 0 3px rgba(0, 194, 95, 0.1);
}

.input-group-code {
  display: flex;
  gap: 12px;
  width: 100%;
}

.code-input {
  flex: 1;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  font-size: 16px;
  transition: all 0.2s;
  box-sizing: border-box;
}

.code-input:focus {
  outline: none;
  border-color: #00c25f;
  box-shadow: 0 0 0 3px rgba(0, 194, 95, 0.1);
}

.code-btn {
  padding: 14px 20px;
  background: #f3f4f6;
  color: #374151;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  min-width: 110px;
}

.code-btn:hover:not(:disabled) {
  background: #e5e7eb;
}

.code-btn:disabled {
  background: #f9fafb;
  color: #9ca3af;
  cursor: not-allowed;
}

.phone-login-btn {
  width: 100%;
  padding: 14px;
  background: #00c25f;
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
}

.phone-login-btn:hover:not(:disabled) {
  background: #00a853;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 194, 95, 0.3);
}

.phone-login-btn:active:not(:disabled) {
  transform: translateY(0);
}

.phone-login-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  opacity: 0.7;
}

.alt-trigger {
  margin-top: 24px;
  background: transparent;
  border: none;
  color: #4b5563;
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
  animation: slideUpFadeIn 0.7s ease-out;
  transition: color 0.2s;
}

.alt-trigger:hover {
  color: #00c25f;
}

.agreements {
  margin-top: 40px;
  margin-bottom: 20px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 20px;
}

.agreement-checkbox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.checkbox-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkbox-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  background: transparent;
  color: transparent;
  transition: all 0.2s;
  margin-right: 4px;
}

.checkbox-custom.checked {
  background: #00c25f;
  border-color: #00c25f;
  color: #ffffff;
}

.agreement-text {
  display: inline;
}

.agreements a {
  text-decoration: none;
  transition: opacity 0.2s;
}

.agreements a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.terms-link {
  color: #667eea;
}

.privacy-link {
  color: #f59e0b;
}


@media (min-width: 768px) {
  .content {
    padding-top: 96px;
  }
  .lexigo {
    font-size: 56px;
  }
  .x {
    font-size: 42px;
  }
  .brand-subtitle {
    font-size: 28px;
  }
}

.curve-container {
  position: relative;
  width: 200px;
  height: 80px;
  /* 可选：添加曲线背景辅助定位 */
  /* background: url("曲线背景图") no-repeat center; */
  /* background-size: contain; */
}

.letter {
  position: absolute;
  font-size: 36px;
  font-weight: bold;
  transition: transform 0.5s ease; /* 可选：添加动画过渡 */
}

/* Password Login Modal Styles */
.password-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.modal-content {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  z-index: 1001;
  animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.modal-header h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
}

.close-btn {
  background: transparent;
  border: none;
  font-size: 28px;
  color: #9ca3af;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s;
}

.close-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.modal-body {
  padding: 24px;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.input-field {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 15px;
  transition: all 0.2s;
  box-sizing: border-box;
}

.input-field:focus {
  outline: none;
  border-color: #00c25f;
  box-shadow: 0 0 0 3px rgba(0, 194, 95, 0.1);
}

.login-submit-btn {
  width: 100%;
  padding: 14px;
  background: #00c25f;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
}

.login-submit-btn:hover:not(:disabled) {
  background: #00a853;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 194, 95, 0.3);
}

.login-submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.login-submit-btn:disabled {
  background: #9ca3af;
  cursor: not-allowed;
  opacity: 0.7;
}

/* Toast Styles */
.toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  color: #ffffff;
  z-index: 10000;
  animation: toastSlideIn 0.3s ease-out;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast.success {
  background: #10b981;
}

.toast.error {
  background: #ef4444;
}

@keyframes toastSlideIn {
  from {
    transform: translateX(-50%) translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
}

@keyframes slideUpFadeIn {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Agreement Modal Styles */
.agreement-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
}

.agreement-modal-content {
  position: relative;
  background: #ffffff;
  border-radius: 16px;
  width: 90%;
  max-width: 360px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  z-index: 1002;
  animation: modalSlideIn 0.3s ease-out;
  overflow: hidden;
}

.agreement-modal-header {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.agreement-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  text-align: center;
  flex: 1;
}

.agreement-modal-header .close-btn {
  position: absolute;
  right: 24px;
  background: transparent;
  border: none;
  font-size: 28px;
  color: #9ca3af;
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: all 0.2s;
}

.agreement-modal-header .close-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.agreement-modal-body {
  padding: 24px;
}

.agreement-modal-body p {
  margin: 0;
  font-size: 15px;
  color: #374151;
  line-height: 1.6;
  text-align: center;
}

.agreement-modal-footer {
  padding: 16px 24px;
  display: flex;
  gap: 12px;
  border-top: 1px solid #f0f0f0;
}

.agreement-btn {
  flex: 1;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.agreement-btn.cancel {
  background: #f3f4f6;
  color: #374151;
}

.agreement-btn.cancel:hover {
  background: #e5e7eb;
}

.agreement-btn.confirm {
  background: #00c25f;
  color: #ffffff;
}

.agreement-btn.confirm:hover {
  background: #00a853;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 194, 95, 0.3);
}

.agreement-btn.confirm:active {
  transform: translateY(0);
}

/* Terms and Privacy Modal Styles */
.terms-content,
.privacy-content {
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.terms-body,
.privacy-body {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}

.terms-text {
  color: #374151;
  line-height: 1.8;
}

.terms-text h4 {
  margin: 20px 0 10px 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

.terms-text h4:first-child {
  margin-top: 0;
}

.terms-text p {
  margin: 0 0 16px 0;
  font-size: 14px;
  color: #6b7280;
  text-align: left;
}
</style>


